<!--  -->
<template>
  <div class="sec-kill_wrap">
    <van-tabs
      v-model="currentIndex"
      sticky
      :ellipsis="false"
      v-if="secKillTabList.length"
      background="linear-gradient(
    95deg,
    rgba(249, 28, 49, 1) 0%,
    rgba(233, 9, 32, 1) 100%"
      title-active-color="#fff"
      :class="{
        listLess2: secKillTabList.length == 3,
        listLess3: secKillTabList.length > 3
      }"
    >
      <van-tab v-for="(v, index) in secKillTabList" :key="index">
        <template slot="title">
          <div style="text-align: center">
            <p class="time">{{ v.timeStr }}</p>
            <p class="text" v-if="v.status === 1">已开抢</p>
            <p class="text" v-if="v.status === 2">抢购中</p>
            <p class="text" v-if="v.status === 3">即将开始</p>
          </div>
        </template>
        <div class="sec-kill-list-wrap">
          <ul v-if="secKillList.length && secKillList[currentIndex].length">
            <li
              class="sec-kill-list-item"
              v-for="(v, index) in secKillList[currentIndex]"
              :key="index"
              @click="goSeckillList(v, index)"
            >
              <img class="pro-img" :src="v.imgUrl || ''" alt="" />
              <p class="sell-out" v-if="v.sellOut === true"></p>
              <p class="sell-out time-out" v-if="timeOut < 0"></p>
              <div class="list-pro-info">
                <p class="pro-name more_text1">
                  {{ v.brandName }}
                </p>
                <p class="list-pro-detail more_text2">
                  {{ v.description }}
                </p>
                <div class="list-pro-price">
                  <div class="price-intro">
                    <p class="real-price">
                      ￥<em>{{ v.price / 100 }}</em
                      ><i>{{ v.discountStr }}</i>
                    </p>
                    <p class="tag_price">￥{{ v.tagPrice / 100 }}</p>
                  </div>

                  <p class="go_buy" v-if="timeOut > 0">
                    马上抢<em class="right_arrow"></em>
                  </p>
                  <p class="go_buy go_look" v-else>
                    去查看<em class="right_arrow"></em>
                  </p>
                  <p class="other_change" v-if="v.sellOut === true">
                    其他推荐
                  </p>
                  <p class="go_buy" v-if="timeOut < 0">购买</p>
                </div>
              </div>
            </li>
            <p class="mo_more">没有更多啦~</p>
          </ul>
          <p v-else class="no_data">商品正在上架~</p>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  name: 'seckill-list',
  data() {
    return {
      secKillList: [],
      secKillTabList: [],
      currentIndex: 0,
      selectFlag: '',
      timeOut: '',
      endTime: '2021-09-27 13:00:00',
      conferenceId: '',
      title: ''
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.secKillTabList = [
        {
          index: 0,
          timeStr: '12:00',
          status: 1,
          selectFlag: 1
        },
        {
          index: 1,
          timeStr: '13:00',
          status: 2,
          selectFlag: 1
        },
        {
          index: 2,
          timeStr: '15:00',
          status: 2,
          selectFlag: 1
        }
      ];
      this.secKillList = this.secKillTabList.map(() => {
        return [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((item, index) => {
          return {
            id: index,
            sellOut: false,
            imgUrl:
              'https://akmer.aikucun.com/merchant-platform/698bc85c978ce17cbff3037cc060185f90d508fe_1631775868217_88.jpg',
            brandName: '欧莱雅眼霜',
            description:
              '欧莱雅紫熨斗眼霜 30ml赠7.5ml【保质期1095天/发货时保质期大于500天】',
            discountStr: '',
            tagPrice: 360,
            price: 186,
            endTime: '2021-09-27 13:00:00'
          };
        });
      });
      console.log('this.secKillList==', this.secKillList);
      this.timeOut = this.getHs(this.endTime) - this.getNowHs();
      console.log('this.timeOut==', this.timeOut);
    },
    getHs(time) {
      const thisTime = time.replace(/-/g, '/');
      const reTime = new Date(thisTime);
      return reTime.getTime();
    },
    getNowHs() {
      return Date.parse(new Date());
    },
    // 去商品id
    goSeckillList(v) {
      console.log(v);
    },
    tip() {
      /**
       * vue 的van-sticky组件实现粘性的原理就是通过添加position:sticky实现的，但是如果你使用了position:sticky后失效，并没有效果的原因有:
       * 1.父元素高度没子元素高，通常为父元素设置height:100%;
       * 2:父元素设置了overflow:hidden,overflow-x:hidden,overflow-y:hidden,或者overflow:auto属性都能影响到
       * 其中父元素是指所有父元素，不单单是上一级父元素，在vue中如果失效了别忘了看app.vue组件里是不是设置了这些
       * 解决好失效问题后，我们再看van-sticky的其中一个悬停的时候距离顶部的距离offset-top
       */
    }
  }
};
</script>
<style lang="scss">
.sec-kill_wrap {
  .van-tabs--line {
    bottom: 0 !important;
    box-sizing: border-box;
  }
  .van-tabs__nav--line {
    width: 100%;
    padding: 6px 0 8px 0;
    box-sizing: border-box;
  }
  .van-tabs--line .van-tabs__wrap {
    height: 57px !important;
  }

  .van-tabs--line {
    bottom: 0 !important;
    box-sizing: border-box;
  }

  .van-tab {
    color: rgba(255, 255, 255, 0.6);
    font-size: 15px;
    padding: 0;
    z-index: 2;
  }

  .van-tabs__line {
    bottom: 8px;
    height: 75.4%;
    background: linear-gradient(
      135deg,
      rgba(255, 191, 51, 1) 0%,
      rgba(255, 104, 20, 1) 100%
    ) !important;
    border-radius: 8px;
  }
  .listLess2 .van-tabs__line {
    width: 25% !important;
  }
  listLess3 .van-tabs__line {
    width: 20% !important;
  }
  .van-hairline--top-bottom::after {
    border-width: 0;
  }
}
</style>
<style lang="scss" scoped>
/* 超出一行 ...*/
.more_text1 {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
}
/* 超出二行 ...*/
.more_text2 {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
}

.time {
  font-size: 16px;
  font-weight: 500;
  padding-top: 5px;
  line-height: 16px;
}
.text {
  font-size: 11px;
  line-height: 16px;
  margin-top: 2px;
}

.sec-kill_wrap {
  // 父元素设置了overflow:hidden,overflow-x:hidden,overflow-y:hidden,或者overflow:auto属性都能影响到
  width: 100%;
  //overflow-x: hidden;
  min-height: 100vh;
  background: #cd1919;
  .sec-kill-list-wrap {
    width: 100%;
    padding: 8px 12px 49px;
    box-sizing: border-box;
    .sec-kill-list-item {
      height: 134px;
      background: rgba(255, 255, 255, 1);
      border-radius: 6px;
      margin-bottom: 8px;
      padding: 10px 14px 10px 10px;
      box-sizing: border-box;
      display: flex;
      justify-content: flex-start;
      position: relative;
      .pro-img {
        width: 114px;
        height: 114px;
        border-radius: 6px;
        display: block;
      }
      .sell-out {
        width: 60px;
        height: 60px;
        position: absolute;
        left: 37px;
        top: 37px;
        background: url('../../assets/seckill_guang.png') no-repeat left center /
          60px 60px;

        &.time-out {
          background: url('../../assets/seckill_end.png') no-repeat left center /
            60px 60px;
        }
      }
      .list-pro-info {
        flex: 1;
        margin-left: 10px;
        .list-pro-name {
          font-size: 14px;
          font-family: PingFangSC, sans-serif;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
          line-height: 20px;
          margin-bottom: 3px;
        }
        .list-pro-detail {
          font-size: 12px;
          font-family: PingFangSC, sans-serif;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          line-height: 17px;
          margin-bottom: 19px;
        }
        .list-pro-price {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .price-intro {
            .real-price {
              color: #e62525;
              font-size: 12px;
              display: flex;
              align-items: center;
              font-family: PingFangSC, sans-serif;
              font-weight: 500;
              em {
                font-size: 18px;
                font-weight: 500;
                color: rgba(230, 37, 37, 1);
                font-style: normal;
              }
              i {
                margin-left: 6px;
                padding: 1px 5px;
                display: flex;
                justify-content: center;
                align-items: center;
                background: rgba(230, 37, 37, 0.09);
                border-radius: 8px;
                font-size: 11px;
                font-style: normal;
                color: #e62525;
                text-align: center;
                font-weight: 400;
              }
            }
            .tag_price {
              font-size: 11px;
              font-family: PingFangSC, sans-serif;
              font-weight: 400;
              color: rgba(153, 153, 153, 1);
              line-height: 16px;
              text-decoration: line-through;
              margin-top: 1px;
            }
          }
          .go_buy {
            padding: 0 10px;
            height: 28px;
            line-height: 28px;
            font-size: 14px;
            background: linear-gradient(
              95deg,
              rgba(255, 128, 64, 1) 0%,
              rgba(255, 51, 85, 1) 100%
            );
            border-radius: 16px;
            color: #ffffff;
            .right_arrow {
              width: 4px;
              height: 7px;
              background: url('../../assets/icon_rigin_arrow_white.png')
                no-repeat right center / 4px 7px;
              display: inline-block;
              margin-left: 4px;
              margin-top: 10px;
              // vertical-align: middle;
            }
            &.go_look {
              background: linear-gradient(
                135deg,
                rgba(255, 201, 76, 1) 0%,
                rgba(255, 140, 0, 1) 100%
              );
            }
          }
          .other_change {
            height: 28px;
            background: rgba(255, 255, 255, 1);
            border-radius: 16px;
            border: 1px solid rgba(230, 37, 37, 1);
            text-align: center;
            font-size: 14px;
            font-family: PingFangSC, sans-serif;
            font-weight: 500;
          }
        }
      }
    }
    .mo_more {
      height: 16px;
      font-size: 11px;
      font-family: PingFangSC, sans-serif;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.6);
      line-height: 16px;
      margin: 19px 0 17px 0;
      text-align: center;
    }
  }
  .no_data {
    height: 16px;
    font-size: 11px;
    font-family: PingFangSC, sans-serif;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    line-height: 16px;
    text-align: center;
    margin-top: 200px;
  }
}
</style>
